<template>
  <div id="printTest">
    <el-row>
      <el-col :span="19">
        <div class="grid-content bg-purple">
          <div style="float:left;">
            <el-button type="primary" icon="el-icon-printer" size="mini" v-print="'#printTest'">打印</el-button>
            <el-button type="info" icon="el-icon-back" size="mini" @click="shang">上一周</el-button>
            <el-button type="info" size="mini" @click="xia">下一周<i style="margin-left:5px;" class="el-icon-right"></i>
            </el-button>
          </div>
          <div style="float:left;padding-left:5px" class="weekday" v-for="(item,index) in weekDayArr" :key="index">
            <span v-if="index==0||index==6">{{item.adate}}</span>
            <span v-if="index==0">~</span>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-input size="mini" v-model="Description" placeholder="输入关键字搜索">
            <el-button slot="append" @click="FNameSelectAttendanceList" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <div style="padding-top:10px"></div>
    <!-- 数据展示 -->
    <el-table :data="tableDate" border class="MyUl">

      <el-table-column prop="部门" label="部门"></el-table-column>
      <el-table-column prop="人员" label="成员"></el-table-column>
      <el-table-column prop="周一" label="星期一">
        <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周一" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="周二" label="星期二">
        <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周二" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="周三" label="星期三">
        <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周三" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="周四" label="星期四">
        <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周四" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="周五" label="星期五">
        <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周五" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="周六" label="星期六"> <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周六" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template></el-table-column>
      <el-table-column prop="周日" label="星期日"> <template slot-scope="scope">
          <ul>
            <li v-for="(item,index) in scope.row.周日" :key="index">
              <p @click="$router.push({path:'/Attendance/Check',query:{pk_Attendance:item.pk_Attendance}})">
                {{item.Type}}：
                {{item.Time|TimeFilter}}
              </p>
            </li>
          </ul>
        </template></el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.foot_page {
  padding: 5px;
  text-align: center;
}
.MyUl {
  ul {
    li {
      color: blue;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
<script>
export default {
  data () {
    return {
      currentFirstDate: "",
      clen: 7,
      todayDate: "",
      Y: null,//年
      // M: null,//月
      // D: null,//日
      StartTime: '',
      EndTime: '',
      tableDate: [
      ],
      weekDayArr: [],
      pk_Attendance: '',
      Description: ''
    }
  },
  created () {
    this.todayDate = this.formatDate(new Date())
    this.Y = new Date().getFullYear();
    this.setDate(new Date())
    this.readData()
  },
  methods: {
    // 日期格式处理
    formatDate (date) {
      var month = (date.getMonth() + 1) + '月';
      var day = date.getDate() + '日';
      var week = ['', '', '', '', '', '', ''][date.getDay()];
      return month + day + ' ' + week;
    },
    //
    addDate (date, n) {
      date.setDate(date.getDate() + n);
      return date;
    },
    //
    setDate (date) {
      var week = date.getDay() - 1;
      date = this.addDate(date, week * -1);

      this.currentFirstDate = new Date(date);
      this.Y = this.currentFirstDate.getFullYear();

      for (var i = 0; i < this.clen; i++) {
        this.weekDayArr.push({ "adate": this.formatDate(i == 0 ? date : this.addDate(date, 1)) })
      }
      //alert(this.weekDayArr[0].adate)
      this.StartTime = `${this.Y}/${this.weekDayArr[0].adate.split('月')[0] + '/' + this.weekDayArr[0].adate.split('月')[1].split('日')[0]}`
      this.EndTime = `${this.Y}/${this.weekDayArr[6].adate.split('月')[0] + '/' + this.weekDayArr[6].adate.split('月')[1].split('日')[0]}`
    },
    readData () {
      this.$axios({
        url: "/HrApi/Attendance/GetWeeklyList",
        method: "POST",
        data: this.$Qs.stringify({
          StartTime: this.StartTime,
          EndTime: this.EndTime,
          Term: ''
        })
      }).then(res => {
        this.tableDate = res.data.data;
      })
    },
    shang () {
      this.weekDayArr = []
      this.setDate(this.addDate(this.currentFirstDate, -7));
      this.readData()
    },
    xia () {
      this.weekDayArr = []
      this.setDate(this.addDate(this.currentFirstDate, 7));
      this.readData();
    },
    //模糊查询
    FNameSelectAttendanceList () {
      this.$axios({
        url: "/HrApi/Attendance/GetWeeklyList",
        method: "POST",
        data: this.$Qs.stringify({
          StartTime: this.StartTime,
          EndTime: this.EndTime,
          Term: this.Description
        })
      }).then(res => {
        this.tableDate = res.data.data;
      })
    }
  },
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T')[1]
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
  mounted () {
    this.readData();
  },
};
</script>